<template>
  <div class="my_div">
    <img
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161030%2F0bf4745fadf046b3a68ece0763fc3010_th.jpeg&refer=http%3A%2F%2Fimg.mp.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666440045&t=9dfec519d1b53f62087e4eedb0639de4"
      alt=""
    />
    <p :style="{ backgroundColor: ColorStr }" @click="btn">
      这是一个happy憨憨的狗
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ColorStr: "",
    };
  },
  methods: {
    btn() {
      this.ColorStr = `
      rgb(${Math.floor(Math.random() * 256)},
      ${Math.floor(Math.random() * 256)},
      ${Math.floor(Math.random() * 256)})
      `;     
    },
  },
};
</script>

<style>
.my_div {
  width: 250px;
  border: 1px solid black;
  text-align: center;
  float: left;
}

.my_div img {
  width: 100%;
  height: 400px;
}
</style>